<template>
  <div class="login_wrap">
    <div class="ocr_wrap">
      <!-- <img src="../assets/ocr.png" alt="" width="590px" height="200px"> -->
    </div>
        <el-button type="text" icon="el-icon-arrow-left" class="exit" size="mini" @click="gotoBack">返回</el-button>

    <div class="title_wrap">
      任务单自动识别系统
    </div>
    <div class="btnGroup">
      <div class="text">请选择查看匹配库的类型：</div>
      <div class="btn1" @click="gotoOne">查看普通匹配库（包含“从”字的操作项）</div><br>
      <div class="btn2" @click="gotoTwo">查看特殊匹配库（不含“从”字的操作项）</div><br>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      placeholder_username: '\ue6c0  请输入手机号',
      placeholder_password: '\ue62f  请输入密码',
      username: '',
      password: ''
    }
  },
  methods: {
    gotoOne() {
      this.$router.push('/showOne')
    },
    gotoTwo() {
      this.$router.push('/showTwo')
    },
    gotoBack() {
      this.$router.push('/')
      
    }
  }
}
</script>

<style lang="scss" scoped>
.exit {
  text-align: center;
    margin-top: 20px;
    margin-left: 30px;
    font-size:16px;
}
.login_wrap {
  background:url("../assets/bg.png") no-repeat;
  background-size:cover;
  width:100%;
  height:100%;
  position:fixed;
  margin-top: -8px;
  margin-left: -8px;
  // .ocr_wrap { 
  //   padding-top: 100px; 
  //   margin-left: 100px;
  // }
  .title_wrap {
    color: white;
    font-size: 60px;
    font-weight: 600;
    margin-top: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .btnGroup {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 300px;

    .btn1, .btn2, .btn3 {
      color: #eee;
      border: 1px solid #eee;
      display: inline-block;
      padding: 10px 0;
      font-size: 32px;
      border-radius: 7px;
      margin-bottom: 50px;
      background: #333;
      width: 700px;
      text-align: center;
      cursor: pointer;
    }
    .text {
      font-size: 38px;
      color: white;
      margin-bottom: 50px;
    } 
  }
}

</style>
